$def with (race)

<html>
  <head>
    <!-- jQuery -->
    <script src="./static/assets/code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="./static/assets/code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    
    <!-- jQuery UI -->
    <link rel="stylesheet" href="./static/assets/code.jquery.com/ui/1.11.2/themes/excite-bike/jquery-ui.css">    
    <script src="./static/assets/code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
    
    <!-- Canvas Resize (http://gokercebeci.com/dev/canvasresize) -->
    <script src="./static/assets/canvasresize/binaryajax.js"></script>
    <script src="./static/assets/canvasresize/exif.js"></script>
    <script src="./static/assets/canvasresize/canvasResize.js"></script>
    
  </head>

  <h1>Add a contestant to $race</h1>

  <!--<form action="/register" method="POST" enctype="multipart/form-data">-->
      <input type="hidden" name="race" id="race" value="$race">
      <input type="hidden" name="jpeg" id="jpeg" value="">
      Your Entry Name: <input type="text" name="name" id="name">
      <br/>
      Your Picture: <input type="file" accept="image/*" capture="camera" name="photo" id="photo" title=" ">
      <br/>
      <img id="preview"></img>
      <br/>
      <input type="submit" value="Register this contestant" disabled>
  <!--</form>-->

  <script type="text/javascript">
  
    var jq = jQuery.noConflict();  
  
    jq("document").ready(function(){

    //  http://stackoverflow.com/questions/11708154/how-to-submit-html5-canvas-as-part-of-form-post
    // http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata?lq=1
      jq('input[type="submit"]').click(function() {
        
        var dataUrl = jq("#preview").attr("src");
        
        var blob = dataURItoBlob(dataUrl);
        var formData = new FormData();
        formData.append("race", "$race");
        formData.append("name", jq("#name").val());
        formData.append("photo", blob);
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'register', true);
        xhr.onload = function(e) { window.location.href = "/contestants?race=$race" };

        xhr.send(formData);           
        
        jq('input[type="submit"]').attr('disabled','disabled');
      });

      jq("#photo").change(function(e) {
        var file = e.target.files[0];
        canvasResize(file, {
          width: 240,
          height: 0,
          crop: false,
          quality: 80,
          rotate: 0,
          callback: function(data, width, height) {
            // show the preview
            jq("#preview").attr("src", data);
            // enable the register button
            jq('input[type="submit"]').removeAttr('disabled');
          }          
        });
      });
      
    });  
  
    //http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata
    function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], { type: 'image/jpeg' });
    }  
     
  </script>
</html>